<script setup>
import { ref,provide,inject,reactive  } from 'vue'
import Materials from "@/components/materials.vue"
import dsls from "@/materials/index"
import Editor from "@/components/Editor.vue"

const editor = ref(null)
const renderComponents = ref([])
provide('renderComponents',renderComponents)

const deepClone = target => JSON.parse(JSON.stringify(target))


const handleDrop = e =>{
 
  e.preventDefault()
  e.stopPropagation()

  const index = e.dataTransfer.getData('index')
  if(index>-1){
    const component = deepClone(dsls[index])
    const rect = editor.value.getBoundingClientRect()
    component.style.top = e.clientY - rect.y +'px'
    component.style.left = e.clientX - rect.x +'px'
    component.id = Math.random().toString(16).slice(5)
    renderComponents.value = [...renderComponents.value,component]
    console.log('renderComponents:',renderComponents)
  }
}

const handleDragOver=e=>{
  e.preventDefault()
  e.stopPropagation()

  e.dataTransfer.dropEffect = 'copy'
}


</script>

<template>
<el-container class="flex-col h-screen">
  <el-header height="64px" class="border-b border-b-gray-300">ToolBar</el-header>
  <el-container class="flex-1">
    <el-aside width="200px">
      <Materials></Materials>
    </el-aside>
    <el-main class="bg-gray-100">
      <div ref="editor" class="w-full h-full relative center" @drop="handleDrop" @dragover="handleDragOver">
        <Editor />
      </div>
    </el-main>
    <el-aside width="250px" >right</el-aside>
  </el-container>
</el-container>
</template>
